<template>
  <div class="admin-home fade-down fadeInDown">
    <div class="card-group">
      <div class="crad-title">
        <el-icon color="#000" size="21"><Pointer /></el-icon>
        <div style="margin-left: 10px">快捷操作</div>
      </div>
      <el-divider>
        <el-icon color="#dcdfe6"><star-filled /></el-icon>
      </el-divider>
      <div class="fast-main">
        <div v-for="item of fastData" :key="item.id">
          <router-link :to="item.path">
            <div class="item-icon">
              <img :src="item.icon" alt="" class="item-img" />
            </div>
          </router-link>
          <div>{{ item.title }}</div>
        </div>
      </div>
    </div>
    <div class="card-group">
      <div class="crad-title">
        <el-icon color="#000" size="21"><Promotion /></el-icon>
        <div style="margin-left: 10px">系统预览</div>
      </div>
      <el-divider>
        <el-icon color="#dcdfe6"><star-filled /></el-icon>
      </el-divider>
      <div class="preview-main">
        <div class="preview-item" v-for="item of previewData" :key="item.id">
          <div>{{ item.title }}</div>
          <div>{{ item.count }}</div>
        </div>
      </div>
    </div>
    <div class="card-group">
      <div class="crad-title" style="justify-content: space-between">
        <div style="display: flex">
          <el-icon color="#000" size="21"><Memo /></el-icon>
          <div style="margin-left: 10px">订单统计</div>
        </div>
        <div>
          <el-select
            v-model="orderStats1.type"
            placeholder="Select"
            style="width: 100px; margin-right: 10px"
          >
            <el-option
              v-for="(item, index) in type"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select
            v-model="orderStats1.year"
            placeholder="Select"
            style="width: 100px; margin-right: 10px"
          >
            <el-option
              v-for="(item, index) in year"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
          <el-select
            v-model="orderStats1.month"
            placeholder="Select"
            style="width: 100px; margin-right: 10px"
          >
            <el-option
              v-for="(item, index) in month"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
          <el-button @click="getOrderStats()">获取</el-button>
        </div>
      </div>
      <el-divider>
        <el-icon color="#dcdfe6"><star-filled /></el-icon>
      </el-divider>
      <div>
        <div id="orderStats" style="height: 400px; width: 100%"></div>
      </div>
    </div>
    <div class="card-group">
      <div class="crad-title">
        <el-icon color="#000" size="21"><User /></el-icon>
        <div style="margin-left: 10px">会员统计</div>
      </div>
      <el-divider>
        <el-icon color="#dcdfe6"><star-filled /></el-icon>
      </el-divider>
      <div>
        <div id="vipStats" style="height: 400px; width: 100%"></div>
      </div>
    </div>
    <div class="card-group">
      <div class="crad-title">
        <el-icon color="#000" size="21"><DataAnalysis /></el-icon>
        <div style="margin-left: 10px">登录日志</div>
      </div>
      <el-divider>
        <el-icon color="#dcdfe6"><star-filled /></el-icon>
      </el-divider>
      <div>
        <el-table
          :data="loginLogDataList"
          style="width: 100%"
          max-height="400"
          stripe
        >
          <el-table-column prop="userName" label="用户账号" />
          <el-table-column prop="ipaddr" label="ip地址" />
          <el-table-column label="状态">
            <template #default="scope">
              <el-tag :type="scope.row.status === 0 ? 'success' : 'danger'">
                {{ scope.row.status === 0 ? "登录成功" : "登录失败" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="os" label="操作系统" />
          <el-table-column prop="browser" label="浏览器" />
          <el-table-column label="登录时间" width="140">
            <template #default="scope">{{
              tool.formatDateToYYYYMMDD(scope.row.loginTime)
            }}</template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="card-group">
      <div class="crad-title">
        <el-icon color="#000" size="21"><DataAnalysis /></el-icon>
        <div style="margin-left: 10px">操作日志</div>
      </div>
      <el-divider>
        <el-icon color="#dcdfe6"><star-filled /></el-icon>
      </el-divider>
      <div>
        <el-table :data="operLogDataList" style="width: 100%" max-height="400">
          <el-table-column prop="title" label="操作名称" />
          <el-table-column label="状态">
            <template #default="scope">
              <el-tag :type="operType[scope.row.businessType]?.key">
                {{ operType[scope.row.businessType]?.value }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="requestMethod" label="请求类型" />
          <el-table-column label="操作时间" width="150">
            <template #default="scope">{{
              tool.formatDateToYYYYMMDD(scope.row.operTime)
            }}</template>
          </el-table-column>
          <el-table-column prop="operName" label="操作人" width="100" />
          <el-table-column prop="operUrl" label="接口地址" width="200" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import {
  Pointer,
  StarFilled,
  Memo,
  User,
  DataAnalysis,
  Promotion,
} from "@element-plus/icons-vue";
import request from "@/assets/js/request";
import { ElMessage } from "element-plus";
let internalInstance = getCurrentInstance();
import tool from "@/assets/js/tool";

let echarts = internalInstance.appContext.config.globalProperties.$echarts;

const type = [
  {
    label: "年",
    value: "year",
  },
  {
    label: "月",
    value: "month",
  },
  {
    label: "天",
    value: "day",
  },
];
const fastData = ref([]);
const previewData = ref([]);
const loginLogDataList = ref([]);
const operLogDataList = ref([]);

const operType = {
  0: {
    key: "info",
    value: "其他",
  },
  1: {
    key: "success",
    value: "新增",
  },
  2: {
    key: "primary",
    value: "修改",
  },
  3: {
    key: "danger",
    value: "删除",
  },
};

const month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
const year = tool.yearArr();
const orderStats1 = ref({
  year: 2024,
  month: 1,
  type: "year",
});

const loginPage = reactive({
  num: 1,
  size: 20,
});
const operPage = reactive({
  num: 1,
  size: 20,
});

const getFastOper = () => {
  request
    .get("/setting/fast/list")
    .then((res) => {
      if (res.code == 200) {
        fastData.value = res.data.fast;
        previewData.value = res.data.preview;

        console.log(fastData.value);
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch((err) => {
      console.log(err.message);
    });
};

// 获取登录日志
const getLoginInfoLog = () => {
  request
    .get(`/login_infor/list?num=${loginPage.num}&size=${loginPage.size}`)
    .then((res) => {
      loginLogDataList.value = res.data.records;
      loginPage.num = res.data.current;
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};
// 获取操作日志
const getOperLog = () => {
  request
    .get(`/operlog/list?num=${loginPage.num}&size=${loginPage.size}`)
    .then((res) => {
      operLogDataList.value = res.data.records;
      operPage.num = res.data.current;
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};
// 获取订单统计
const getOrderStats = () => {
  const orderStats = document.getElementById("orderStats");
  const orderChart = echarts.init(orderStats); // 初始化echarts实例
  request
    .post("/order/stats", orderStats1.value)
    .then((res) => {
      if (res.code === 200) {
        let dateArr = res.data.map((item) => item.date);
        let countArr = res.data.map((item) => item.count);
        const option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
            backgroundColor: "#fff", // 悬浮框背景色
            borderColor: "#000", // 悬浮框边框颜色
            borderWidth: 1, // 悬浮框边框宽度
            textStyle: {
              // 悬浮框文字样式
              color: "#000",
              fontSize: 12,
            },
          },
          xAxis: {
            type: "category",
            data: dateArr,
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: countArr,
              type: "line",
              smooth: true,
            },
          ],
        }; // 设置实例参数
        orderChart.setOption(option);
      } else {
        ElMessage.error("加载失败");
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};

onMounted(() => {
  const vipStats = document.getElementById("vipStats");
  const vipChart = echarts.init(vipStats); // 初始化echarts实例
  const option = {
    xAxis: {
      type: "category",
      data: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: "line",
        smooth: true,
      },
    ],
  }; // 设置实例参数
  vipChart.setOption(option);

  getFastOper();
  getOrderStats();
  getLoginInfoLog();
  getOperLog();
});
</script>

<style lang="scss" scoped>
.admin-home {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 10px;
  width: 100%;
  grid-gap: 10px;
  box-sizing: border-box;
}
.card-group {
  padding: 10px;
  box-shadow: 0 0 2px 1px #eee;
  margin-bottom: 10px;
  .crad-title {
    color: #333333;
    display: flex;
    padding-top: 14px;
  }
}

.fast-main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  .item-icon {
    padding: 0 40px;
    height: 70px;
    display: flex;
    align-items: center;
    background: #eeeeee;
    border-radius: 2px;
    justify-content: center;
  }
  .item-img {
    width: 30px;
  }
}

.preview-main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.preview-item {
  text-align: left;
  height: 90px;
  background: #eeeeee;
  padding: 10px;

  box-sizing: border-box;
  & > div:nth-child(1) {
    color: #bdbdbd;
    line-height: 25px;
    font-size: 14px;
  }
  & > div:nth-child(2) {
    color: #009688;
    font-size: 30px;
    font-weight: 600;
    line-height: 45px;
  }
}
</style>
import { map } from "core-js/core/array";
